<template>
	<div v-if="datas" class="detal-box" :key="getKey()">
		<!-- 上面卡片 -->
		<TopCard v-model:activeKey="activeKey" :title="title" />
		<div v-show="activeKey == 1" style="padding-bottom: 80px;">
			<!-- 如果是退回到申请人的工单 -->
			<template v-if="isBack">
				<!-- 如果是下架或接入 -->
				<Basic v-if="approvalType == '0' || approvalType == '8'" ref="down" />
				<!-- 如果不是下架 -->
				<BasicForm v-else ref="basic" @getVariable="hqVariable" />
				<!-- 如果是下架显示配置信息 -->
				<Configure v-if="approvalType == '0'" :appAccess="appAccess" />
				<!-- 如果是新增,基本信息的修改被退回  则不显示配置信息 -->
				<ConfigureForm ref="gure" v-if="approvalType != '0' && approvalType != '1' && tableName !== 'XX'"
					:appAccess="appAccess" />
			</template>
			<!-- 不是是退回到申请人的工单 -->
			<template v-else>
				<!-- 基本信息 -->
				<Basic />
				<!-- 配置信息, 不是新增 && 不是业务部门审核 && 不是只修改基本信息的待办 && 不是申请人提交生产材料审批 -->
				<Configure v-if="approvalType != '1' && !ishs && tableName !== 'XX' && !isProd"
					:appAccess="appAccess" />
				<ConfigureForm ref="gure" v-if="approvalType === '8' && isProd" :appAccess="appAccess" />
			</template>
			<!-- 如果不是业务部门审核 && 不是新增才显示附件 && 不是只修改基本信息的待办-->
			<template v-if="!ishs && approvalType != '1' && tableName !== 'XX'">
				<!-- 附件--待办显示 -->
				<div v-if="doneStatus == '0'">
					<!-- 附件补充或者是退回工单、申请人提交生产材料 -->
					<AnnexFormNew ref="annex" v-if="supplement || isBack || isProd"
						:type="tableName && tableName.includes('PC') ? 'PC' : 'APP'" />
					<Annex v-else />
				</div>
				<Annex v-else />
			</template>


			<template v-if="showMd">
				<!-- 0灰名单   1黑名单   2白名单 -->
				<!-- 灰度名单 -->
				<GrayscaleTable configKey="2" :isblack="'0'" />
				<!-- 黑名单 -->
				<GrayscaleTable configKey="2" :isblack="'1'" />
				<!-- 白名单 -->
				<GrayscaleTable v-if="showWhite" configKey="2" :isblack="'2'" />
			</template>





			<!-- 应用发布环节和待办中才显示 -->
			<div class="uiue-card" v-if="doneStatus == '0' && upConfirm">
				<a-form :model="formDelay" layout="vertical" class="form-box">
					<a-row :gutter="75">
						<!-- 不是生产环境才显示radio -->
						<a-col :span="8" v-if="!isProduction">
							<a-form-item label="是否延时发布" :rules="[{ required: true }]" name="isTask">
								<a-radio-group v-model:value="formDelay.isTask" @change="isTaskChange">
									<a-radio value="1">是</a-radio>
									<a-radio value="0">否</a-radio>
								</a-radio-group>
							</a-form-item>
						</a-col>
						<a-col :span="8" v-if="formDelay.isTask === '1'">
							<a-form-item label="发布时间" name="time">
								<!-- <a-date-picker style="width: 100%" v-model:value="formDelay.time"
									valueFormat="YYYY-MM-DD HH:mm:ss" :show-time="true" /> -->
								<div style="display: flex">
									<a-form-item>
										<a-date-picker v-model="selectedDate" :showToday="false"
											:disabledDate="disabledDate" @change="dateChange"></a-date-picker>
									</a-form-item>
									<a-form-item style="margin-left: 10px">
										<a-time-picker v-model="selectedTime" :showNow="false"
											:disabled-hours="disabledHours" :disabled-minutes="disabledMinutes"
											:disabled-seconds="disabledSeconds" @change="timeChange"></a-time-picker>
									</a-form-item>
								</div>


							</a-form-item>
						</a-col>
					</a-row>
				</a-form>
			</div>

			<div class="uiue-card" v-if="currentName === '应用上线'">
				<a-descriptions :column="4" class="dessy">
					<a-descriptions-item label="是否延时发布">
						{{ datas?.isTask === '1' ? '是' : '否' }}
					</a-descriptions-item>
					<a-descriptions-item label="发布时间" v-if="datas?.isTask === '1'">
						{{ datas?.taskTime }}
					</a-descriptions-item>
				</a-descriptions>
			</div>
			<!-- 运营组审核显示二维码和链接 -->
			<div class="uiue-card" v-if="approvalType === '8' && showYun && testXX">
				<div class="tit">测试信息</div>
				<a-descriptions :column="4" class="dessy">
					<a-descriptions-item v-if="tableName.includes('APP')" label="IOS">
						<a-image :width="80" :src="setImg(testXX.testApp)" />
					</a-descriptions-item>
					<a-descriptions-item v-if="tableName.includes('APP')" label="Android">
						<a-image :width="80" :src="setImg(testXX.testUrl)" />
					</a-descriptions-item>
					<a-descriptions-item v-if="tableName.includes('PC')" label="PC测试环境地址">
						{{ testXX.pcTestUrl }}
					</a-descriptions-item>
				</a-descriptions>
			</div>
			<div class="uiue-card" v-if="dataSource.length > 0">
				<div class="tit">变更内容</div>
				<a-table class="mt10 mb5" :dataSource="dataSource" :columns="columns" :pagination="false"
					:scroll="{ x: 'max-content' }">
					<template #changeTerm="{ text }">
						{{ zidian(text) }}
					</template>
					<template #changeBeforeContent="{ text, record }">
						<span v-if="record.changeTerm == 'pcConfigauthType'">
							{{ bianli(rzzt, text) }}
						</span>
						<span
							v-else-if="record.changeTerm == 'pcConfigpendingCategory' || record.changeTerm == 'pcConfigreadingCategory'">
							{{ bianli(dbssType, text) }}
						</span>
						<span v-else-if="record.changeTerm == 'appCategory'">
							{{ bianli(yyfl, text) }}
						</span>
						<span v-else-if="record.changeTerm == 'noAccessTypeRemark'">
							{{ bianli(wjryy, text) }}
						</span>
						<span v-else-if="record.changeTerm == 'appContact'">
							{{ xmjl(text) }}
						</span>
						<span v-else-if="record.changeTerm == 'appAccess'">
							{{ sdjs(text) }}
						</span>
						<span
							v-else-if="record.changeTerm == 'appConfigintelPassPhoto' || record.changeTerm == 'appConfigappInterfacePhoto' || record.changeTerm == 'pcConfigpcLogo' || record.changeTerm == 'pcConfigappDesignPage' || record.changeTerm == 'pcConfigintelPassPhoto' || record.changeTerm == 'appConfigappLogo'">
							<template v-if="text">
								<div v-if="text.includes('group')">
									--
								</div>
								<div v-else>
									<AuthImg class="img-item" v-for="item in JSON.parse(text)" :key="item.url"
										:authSrc="item.url" />
								</div>
							</template>
						</span>
						<span
							v-else-if="record.changeTerm == 'appConfigltbgTestUpdateDoc' || record.changeTerm == 'appConfiganSaoDoc' || record.changeTerm == 'appConfigltbgProdUpdateDoc' || record.changeTerm == 'pcConfigpcTestDoc' || record.changeTerm == 'pcConfigpcProdTestDoc'">
							<template v-if="text">
								<div v-if="text.includes('group')">
									--
								</div>
								<div v-else>
									<div v-for="item in JSON.parse(text)" :key="item.url" @click="downloadFile(item)"
										class="file-item">
										<paper-clip-outlined style="margin-right: 5px; cursor: pointer;" />{{ item.name
										}}
									</div>
								</div>
							</template>
						</span>
						<span v-else-if="is12.includes(record.changeTerm)">
							{{ text == '1' ? '是' : '否' }}
						</span>
						<span v-else>
							{{ text }}
						</span>
					</template>
					<template #changeAfterContent="{ text, record }">
						<span v-if="record.changeTerm == 'pcConfigauthType'">
							{{ bianli(rzzt, text) }}
						</span>
						<span
							v-else-if="record.changeTerm == 'pcConfigpendingCategory' || record.changeTerm == 'pcConfigreadingCategory'">
							{{ bianli(dbssType, text) }}
						</span>
						<span v-else-if="record.changeTerm == 'appCategory'">
							{{ bianli(yyfl, text) }}
						</span>
						<span v-else-if="record.changeTerm == 'noAccessTypeRemark'">
							{{ bianli(wjryy, text) }}
						</span>
						<span v-else-if="record.changeTerm == 'appContact'">
							{{ xmjl(text) }}
						</span>
						<span v-else-if="record.changeTerm == 'appAccess'">
							{{ sdjs(text) }}
						</span>
						<span
							v-else-if="record.changeTerm == 'appConfigintelPassPhoto' || record.changeTerm == 'appConfigappInterfacePhoto' || record.changeTerm == 'pcConfigpcLogo' || record.changeTerm == 'pcConfigappDesignPage' || record.changeTerm == 'pcConfigintelPassPhoto' || record.changeTerm == 'appConfigappLogo'">
							<template v-if="text">
								<!-- <AuthImg class="img-item" v-for="item in JSON.parse(text)" :key="item.url"
									:authSrc="item.url" />  -->
								<div v-if="text.includes('group')">
									--
								</div>
								<div v-else>
									<AuthImg class="img-item" v-for="item in JSON.parse(text)" :key="item.url"
										:authSrc="item.url" />
								</div>
							</template>
						</span>
						<span
							v-else-if="record.changeTerm == 'appConfigltbgTestUpdateDoc' || record.changeTerm == 'appConfiganSaoDoc' || record.changeTerm == 'appConfigltbgProdUpdateDoc' || record.changeTerm == 'pcConfigpcTestDoc' || record.changeTerm == 'pcConfigpcProdTestDoc'">
							<template v-if="text">
								<div v-if="text.includes('group')">
									--
								</div>
								<div v-else>
									<div v-for="item in JSON.parse(text)" :key="item.url" @click="downloadFile(item)"
										class="file-item">
										<paper-clip-outlined style="margin-right: 5px; cursor: pointer;" />{{ item.name
										}}
									</div>
								</div>
							</template>
						</span>
						<span v-else-if="is12.includes(record.changeTerm)">
							{{ text == '1' ? '是' : '否' }}
						</span>
						<span v-else>
							{{ text }}
						</span>
					</template>
				</a-table>
			</div>

			<div class="uiue-card" v-if="doneStatus == '0'">
				<div class="tit" style="margin-bottom: 10px">审批意见</div>
				<a-form ref="refOpinion" :model="formData" layout="vertical" class="form-box">
					<template v-if="!isBack">
						<a-form-item label="">
							<a-radio-group v-model:value="opinion" @change="opinionChange">
								<a-radio value="1">同意</a-radio>
								<a-radio value="2">不同意</a-radio>
							</a-radio-group>
						</a-form-item>
						<a-form-item label="审批意见" name="auditAgree" :rules="[{ required: true, message: '请输入审批意见' }]">
							<a-textarea type="textarea" v-model:value="formData.auditAgree" :maxlength="200"
								:auto-size="{ minRows: 3, maxRows: 5 }" placeholder="请输入审批意见不超过200字" allow-clear />
						</a-form-item>
					</template>
					<a-form-item label="下一步处理环节" name="stepName">
						<a-input v-model:value="stepName" readonly />
					</a-form-item>
					<!-- <a-form-item
						v-if="stepId != 'a999'"
						label="下一步处理人"
						name="approvalUsers"
						:rules="[{ required: true, message: '选择下一步处理人' }]"
					>
						<a-input v-model:value="approvalUsers" placeholder="请选择下一步审批人" readonly @click="selectPerson">
							<template #suffix>
								<search-outlined style="color: rgba(0, 0, 0, 0.45)" />
							</template>
						</a-input>
					</a-form-item> -->
				</a-form>
			</div>

			<!-- <div class="uiue-card btn" :class="{ btnposi: activeKey == 2 || activeKey == 3 }"> -->
			<div class="btnBottom" :class="{ btnposi: activeKey == 2 || activeKey == 3 }">
				<a-button class="bt1" :loading="btnLoading" @click="backs">返回</a-button>
				<!-- 待阅 -->
				<a-button class="bt1" v-if="doneStatus == '2'" type="primary" :loading="btnLoading"
					@click="toRead">已阅</a-button>
				<!-- 待办 -->


				<!-- 撤销 -->
				<a-button class="bt1" type="primary" v-if="doneStatus == '0' && isBack" :loading="btnLoading"
					@click="quash">撤销</a-button>


				<a-popover title="选择" v-if="doneStatus == '0'" trigger="click">
					<template #content>
						<p style="cursor: pointer" v-for="item in backList" :key="item.key" @click="backStep(item.key)">
							{{ item.name }}
						</p>
					</template>
					<a-button :disabled="opinion === '1'" class="bt1" :loading="btnLoading" v-if="!isBack">退回</a-button>
				</a-popover>
				<template v-if="doneStatus == '0'">
					<!-- 平时正常的提交 -->
					<a-button type="primary" :loading="btnLoading" v-if="!isBack" @click="submit"
						:disabled="opinion === '2' && showBackBtn">提交审批</a-button>
					<!-- 被退回到发起人的提交 -->
					<a-button type="primary" :loading="btnLoading" v-else @click="validateSubmit">提交审批</a-button>
				</template>
			</div>
			<!-- </div> -->
		</div>
		<ProcessHistory v-show="activeKey == 2" :datas="historyAudit" />
		<FlowChart v-show="activeKey == 3" :datas="chartData" />
	</div>
	<a-modal v-model:visible="visible" title="提示" @ok="handleOk">
		<p><exclamation-circle-outlined style="margin-right: 6px; color: red" />请确认已经按照附件要求上传/修改附件</p>
	</a-modal>
	<a-modal v-model:visible="choose" title="选择环节" @ok="chooseOk">
		<a-radio-group v-model:value="choData" @change="radioChange">
			<a-radio v-for="(item, index) in zsHistory" :key="index" :value="item.stepId" :style="radioStyle">{{
		item.stepName
	}}</a-radio>
		</a-radio-group>
	</a-modal>
	<PickPeople ref="pick" @succses="setUser" :setPersions="setPersions"
		v-if="roleList.length > 0 && stepName !== '业务部门审核'" :roleList="roleList" />
	<PickPeoplea ref="pick" @succses="setUser" :setPersions="setPersions"
		v-if="roleList.length > 0 && stepName === '业务部门审核'" :roleList="roleList" />
</template>

<script setup name="Detail">
import { message } from 'ant-design-vue'
import { Modal } from 'ant-design-vue';
import { createVNode } from 'vue';
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import dayjs from 'dayjs'
import tool from '@/utils/tool'
import TopCard from '@/components/Detail/topCard.vue'
import Basic from '@/components/Detail/basic.vue'
import Annex from '@/components/Detail/annex.vue'
import AnnexFormNew from '@/views/biz/appinfo/form/annexFormNew.vue'
import BasicForm from '@/views/biz/appinfo/form/basicForm.vue'
import ConfigureForm from '@/views/biz/appinfo/form/configure/index.vue'
import Configure from '@/components/Detail/configure/index.vue'
import ProcessHistory from '@/components/ProcessHistory/index.vue'
import FlowChart from '@/components/FlowChart/index.vue'
import approvalApi from '@/api/biz/approvalApi'
import appInfoApi from '@/api/biz/appInfoApi'
import appGrayscaleApi from '@/api/biz/appGrayscaleApi'
import PickPeople from '@/components/pickPeople/index.vue'
import PickPeoplea from '@/components/pickPeople/indexa.vue'
import bizRoleApi from '@/api/biz/bizRoleApi'
import appinfoflowApi from '@/api/biz/appinfoflowApi'
import appInfoTestUrlApi from '@/api/biz/appInfoTestUrlApi'
import { cloneDeep } from 'lodash-es'
import { useRoute, useRouter } from 'vue-router'
import store from '@/store'
import AuthImg from '@/components/authImg/index.vue'
import sysConfig from '@/config/index'

import { biangeng, is12, dbssType, yyfl, rzzt, wjryy } from '@/utils/dictionary'
const route = useRoute()
const router = useRouter()
const refOpinion = ref(null)
const annex = ref(null)
const down = ref(null)
const formDelay = reactive({
	isTask: null,
	time: null
})
const btnLoading = ref(false)
const approvalType = ref(route.query.approvalType)
const promoter = route.query.originatorName
const title = computed(() => {
	return route.query.title
})
// doneStatus 0待办  1已办  2待阅 3已阅
const doneStatus = ref(route.query.doneStatus)
// const tableName = route.query.tableName
// 生成一个唯一的 key，包括查询参数
const getKey = () => {
	return JSON.stringify(route.query); // 将查询参数转换为字符串作为 key
}


const tableName = computed(() => {
	/** 接入前   空或 1 是接入前    2 是接入后 */
	let str = route.query.tableName

	if (approvalType.value === '1') {
		// 如果是新建应用流程的时候不显示配置信息
		str = 'XX'
	}
	if (approvalType.value === '2') {
		// 如果是编辑应用流程的时候不显示配置信息
		const { appPropertiesList = [], pcPropertiesList = [] } = datas.value;
		if (appPropertiesList[0]?.accesssBefore === '2' || pcPropertiesList[0]?.accesssBefore === '2') {
			str = route.query.tableName
		} else {
			str = 'XX'
		}
	}
	return str
})


// 是否是生产环境
const isProduction = computed(() => {
	return sysConfig.NODE_ENV === 'production'
})
formDelay.isTask = isProduction.value ? '1' : null




tool.session.set('doneStatus', route.query.doneStatus)
tool.session.set('promoter', promoter)
tool.session.set('approvalType', route.query.approvalType)
tool.session.set('stepId', route.query.stepId)

// 显示灰度和黑名单
const showMd = ref()
const showTable = () => {
	// const tableName = route.query.tableName
	let bool = false
	// const arr = ['1', '2', '3', '5', '8']
	// 如果是待阅和已阅就不显示两个名单
	if (doneStatus.value === '2' || doneStatus.value === '3') return
	if (tableName.value.includes("APP")) {
		// 接入
		if (approvalType.value === '8') {
			if (chartData.value) {
				const hindex = chartData.value.flwdata.findIndex((v) => v.linkName === '申请人提交生产材料')
				// 当前环节index
				const index = chartData.value.flwdata.findIndex((v) => v.linkId === chartData.value.selectSteps)
				if (hindex <= index) bool = true
			}
		}
		// 修改和升级和下架
		if (approvalType.value === '2' || approvalType.value === '3' || approvalType.value === '0') bool = true;
		showMd.value = bool
	}
}


const emit = defineEmits(['cancelHandel'])
const datas = ref()
const historyAudit = ref()
const chartData = ref()
const params = {
	id: route.query.id
}
const stepName = ref() // 下一步环节名称
const stepId = ref() // 下一步环节Id
const currentName = ref() // 当前环节名称
const approvalUsers = ref() //选择的人名
const bcForm = ref({})
const getFlowchart = async () => {
	chartData.value = await approvalApi.getFlowchart(params)
	const selectSteps = chartData.value.selectSteps
	currentName.value = chartData.value.flwdata.find((v) => v.linkId === selectSteps).linkName
	tool.data.set('currentName', currentName.value)
	showTable()
}
const arrFlow = reactive(['测试环境验证', '生产环境灰度测试/材料提交', '应用上线'])
const testXX = ref()
// 新增和接入显示联通办公的二维码或链接
if (approvalType.value === '1' || approvalType.value === '8') {
	appInfoTestUrlApi.appInfoTestUrlPage().then((data) => {
		testXX.value = data.records?.[0]
	})
}
const fileUrl = import.meta.env.VITE_FILE_URL_W

const setImg = (path) => {
	return `${fileUrl}/${JSON.parse(path)[0].url}`
}
const dataSource = ref([])

const columns = [
	{
		title: '变更字段',
		dataIndex: 'changeTerm',
		slots: { customRender: 'changeTerm' },
	},
	{
		title: '变更前',
		dataIndex: 'changeBeforeContent',
		slots: { customRender: 'changeBeforeContent' },
	},
	{
		title: '变更后',
		dataIndex: 'changeAfterContent',
		slots: { customRender: 'changeAfterContent' },
	}
]



// 附件补充
const supplement = computed(() => {
	let str = false
	if ((approvalType.value === '8' || approvalType.value === '3') && arrFlow.some((v) => v == currentName.value)) {
		str = true
	}
	if (tableName.value && tableName.value.includes('APP') && currentName.value === '应用上线') {
		// 这个判断是 pc在应用上线的时候可以编辑附件， APP时候不可以
		str = false
	}
	if (tableName.value && tableName.value.includes('APP') && currentName.value === '生产环境材料提交') {
		str = true
	}
	return str
})
// 运营组审核修改参数
const showParam = computed(() => {
	const arr = ['0', '6', '7']
	return currentName.value === '运营组审核' && !arr.includes(approvalType.value)
})
// 运营组审核
const showYun = computed(() => {
	return currentName.value === '运营组审核'
})
// 申请人提交生产材料可以编辑配置信息
const isProd = computed(() => {
	return approvalType.value === '8' && (currentName.value === '申请人提交生产材料')
})


// 退回按钮展示
const showBackBtn = computed(() => {
	// 新增 升级 接入
	let arr = ['1', '3', '5', '8']
	let show = false
	let bool = arr.some(v => v === approvalType.value)

	// 如果不是倒数第2步
	if (stepId.value != 'a999') {
		show = true
	} else {
		// 若果是倒数第二部并且是应用上线环节
		if (currentName.value === '应用上线' && bool) {
			show = true
		}
	}
	// 是新增应用流程并且是运营组审核
	if (currentName.value === '运营组审核' && approvalType.value === '1') {
		show = true
	}
	return show
})
// 业务部门审核环节不显示配置信息
const ishs = computed(() => {
	return currentName.value === '业务部门审核'
})
// 选人双端2个单端1个可以选多个并且禁用
const setPersions = computed(() => {
	// let bool = false
	// if (tableName.includes(',')) {
	// bool = stepName.value === '运营组审核' || stepName.value === '项目经理审核'
	// }
	// return bool
	return stepName.value === '运营组审核' || stepName.value === '项目经理审核'
})
// 应用上线确认环节选择上线时间
const upConfirm = computed(() => {
	return currentName.value === '应用发布'
})

// 是否延时发布变化
const isTaskChange = (e) => {
	const { value } = e.target
	formDelay.time = value === '1' ? formDelay.time : null
}
//路由返回
const backs = () => {
	//1是待办进入 0是正常进入
	const istodo = tool.session.get('IS_TODO')
	if (istodo && istodo === '1') {
		// 关闭页签
		window.opener = null
		window.open('', '_self')
		window.close()
	} else {
		// 退到上一页
		store.commit('removeViewTags', route)
		router.back()
	}

}
//撤销
const quash = async () => {
	btnLoading.value = true
	const params = { processInstanceids: [route.query.processInstanceId] };
	await appinfoflowApi.cancelbyuser(params);
	btnLoading.value = false
	backs()
}
// 待阅转已阅
const toRead = () => {
	const id = route.query.wfSendRoundInfoId
	approvalApi.doReading({ id }).then(() => {
		backs()
	})
}
const showWhite = computed(() => {
	let bool = false
	// 如果是审批详情
	if (tableName.value) {
		// 只有单端移动并且权限为白名单的时候
		if (datas.value.appPropertiesList[0]?.permission === '1' && !datas.value.appAccess.includes('1')) {
			bool = true
		}
	}
	return bool
})

// 当前环节名称
provide('currentName', currentName)
const getAudit = async () => {
	historyAudit.value = await approvalApi.getAudit(params)
}
const stepPath = async () => {
	const str = await approvalApi.stepPath({ messageWorkitemId: route.query.id })
	stepName.value = str.stepName
	stepId.value = str.stepId
}
// const disabledDate = (current) => {
// 	// Can not select days before today and today
// 	return (
// 		(current && current < dayjs().startOf('day').hour(22).minute(0).second(0)) ||
// 		current > dayjs().add(1, 'day').hour(16).minute(0).second(0)
// 	)
// }
const selectedDate = ref(null);
const selectedTime = ref(null);

const disabledDate = (current) => {
	return current && current < dayjs().startOf('day')
	// (
	// 	(current && current < dayjs().startOf('day') ||
	// 		current > dayjs().add(1, 'day')
	// 	)
	// )


	// return current && (dayjs(current).isBefore(today) || dayjs(current).isAfter(tomorrow));

};

const disabledHours = () => {
	// 禁止选择22点之前和4点之后的时间
	return Array.from({ length: 24 }, (_, index) => index).filter(
		(hour) => hour < 22 && hour > 4
	);
};
const disabledMinutes = (selectedHour) => {
	if (selectedHour === 4) {
		// 如果选择的小时是00点，禁用00分钟
		return Array.from({ length: 60 }, (_, index) => index).filter((minute) => minute > 0);
	} else {
		// 其他小时不禁用分钟
		return [];
	}
}
const disabledSeconds = (selectedHour) => {
	if (selectedHour === 4) {
		// 如果选择的小时是00点，禁用00分钟
		return Array.from({ length: 60 }, (_, index) => index).filter((seconds) => seconds > 0);
	} else {
		// 其他小时不禁用分钟
		return [];
	}
}
const timeChange = (time, str) => {
	selectedTime.value = str
	if (selectedDate.value) {
		formDelay.time = selectedDate.value + ' ' + selectedTime.value
	}

}
const dateChange = (_, str) => {
	selectedDate.value = str
	if (selectedTime.value) {
		formDelay.time = selectedDate.value + ' ' + selectedTime.value
	}
}




const visible = ref(false)

// 给h5参数信息赋值
const setParam = () => {
	const obj1 = {}
	let arr = []
	obj1[bcForm.value.appName] = {
		appid: 'xxxxx',
		appname: bcForm.value.appName,
		id: 'xxxxx',
		params: {
			app_name: '',
			app_type: '', // db || yb || dy || yy
			tag_type: '',
			encode_url: '',
			title: '',
			url: ''
		},
		subsystem: '其他',
		system: bcForm.value.appName,
		tagtype: '其他'
	}

	if (bcForm.value.isAppTodo === '1') {
		// 接入待办
		let appType = ['db', 'yb']
		appType.forEach((v) => {
			let obj = cloneDeep(obj1)
			obj[bcForm.value.appName].params.app_type = v
			arr.push(obj)
		})
	}
	if (bcForm.value.isAppReadtodo === '1') {
		// 接入待阅
		let appType = ['dy', 'yy']
		appType.forEach((v) => {
			let obj = cloneDeep(obj1)
			obj[bcForm.value.appName].params.app_type = v
			arr.push(obj)
		})
	}
	bcForm.value.appInfoAppPropertiesAddParam.param = JSON.stringify({ ...arr })
}
// 提交审批
const submitFlow = () => {
	btnLoading.value = true
	formData.yesOrNo = opinion.value === '1' ? 'Y' : 'N'
	approvalApi
		.submitTask({ ...formData, ...params })
		.then(() => {
			btnLoading.value = false
			backs()
		})
		.catch((err) => {
			btnLoading.value = false
		})
}
const fitFile = (arr) => {
	return arr.length > 0 ? JSON.stringify(arr) : ''
}
// 提示弹窗点击确认
const handleOk = () => {
	visible.value = false
	if (isBack.value) {
		if (approvalType.value === '1') {
			bcForm.value.appAccess = bcForm.value.appAccess.join(',')
		}
		if (approvalType.value === '8' || approvalType.value === '2' || approvalType.value === '3') {
			if (tableName.value.includes('PC')) {
				if (bcForm.value.appInfoPcPropertiesAddParam.compatibility && Array.isArray(bcForm.value.appInfoPcPropertiesAddParam.compatibility)) {
					bcForm.value.appInfoPcPropertiesAddParam.compatibility = bcForm.value.appInfoPcPropertiesAddParam.compatibility.join(',')
				}
			}
		}
		if (bcForm.value.appAccess && Array.isArray(bcForm.value.appAccess)) {
			bcForm.value.appAccess = bcForm.value.appAccess.join(',')
		}
		if (bcForm.value.changeDetails && typeof (bcForm.value.changeDetails) == 'string') {
			bcForm.value.changeDetails = JSON.parse(bcForm.value.changeDetails)
		}
	}
	if (approvalType.value === '8') {
		if (tableName.value.includes('PC')) {
			if (bcForm.value.appInfoPcPropertiesAddParam?.compatibility && Array.isArray(bcForm.value.appInfoPcPropertiesAddParam?.compatibility)) {
				bcForm.value.appInfoPcPropertiesAddParam.compatibility = bcForm.value.appInfoPcPropertiesAddParam.compatibility.join(',')
			}
		}
	}
	const obj = cloneDeep(bcForm.value)





	if (supplement.value) {
		// 测试环境验证
		if (tableName.value.includes('PC')) {
			obj.appInfoPcPropertiesAddParam = { ...datas.value.pcPropertiesList[0], ...bcForm.value }
		}
		if (tableName.value.includes('APP')) {
			obj.appInfoAppPropertiesAddParam = { ...datas.value.appPropertiesList[0], ...bcForm.value }
		}
	}

	// 如果流程名是申请人提交生产材料&&存在APP复制名单
	if (isProd.value && tableName.value.includes('APP')) {
		const version = datas.value?.appInfoAppPropertiesAddParam ? datas.value?.appInfoAppPropertiesAddParam.appVersion : datas.value?.appPropertiesList[0].appVersion;
		const params = {
			appCode: datas.value.appCode,
			appVersion: version,
			toAppVersion: store.state.appinfo.appVersion,
		}
		appGrayscaleApi.copyedit(params)
	}

	appInfoApi
		.backEdit({ ...obj, id: datas.value.id })
		.then(() => {
			submitFlow()
		})
		.catch((err) => {
			btnLoading.value = false
		})
}
const yunOk = () => {
	const param = tool.session.get('param')
	const ywForm = cloneDeep(datas.value)
	if (ywForm.appPropertiesList[0]) {
		ywForm.appInfoAppPropertiesAddParam = ywForm.appPropertiesList[0]
		ywForm.appInfoAppPropertiesAddParam.param = param
	}
	if (ywForm.changeDetails && typeof (ywForm.changeDetails) == 'string') {
		ywForm.changeDetails = JSON.parse(ywForm.changeDetails)
	}

	let obj = ywForm
	appInfoApi.backEdit(obj).then(() => {
		submitFlow()
	})
}

// 验证审批信息表单
const validsp = () => {
	refOpinion.value
		.validate()
		.then(() => {
			btnLoading.value = false
			if (stepId.value != 'a999') {
				getRoleList()
			} else {
				lastOk()
			}
		})
		.catch((err) => {
			console.log('失败')
			btnLoading.value = false
		})
}

//下架流程被退回再次提交的修改
const backDelist = () => {
	const params = {
		messageTrackId: route.query.id,
		reason: down.value.formData.reason,
		clear: down.value.formData.clear || '0'
	}
	appInfoApi.backDelist(params).then((res) => {
		validsp()
	})
}
const lastClickTime1 = ref(0)
const clickInterval1 = ref(1000) // 定义点击间隔为1秒

// 效验表单
const validateSubmit = async () => {

	const currentTime = Date.now();
	if (currentTime - lastClickTime1.value < clickInterval1.value) {
		// 时间间隔过小，直接返回
		return;
	}
	lastClickTime1.value = currentTime;


	if (approvalType.value == '0') {
		//如果是下架
		if (!down.value.formData.reason) {
			message.warning('请完善下架原因')
			return false
		}
	} else if (approvalType.value == '1') {
		const basicVali = await basic.value.handleValidate()
		if (basicVali) {
			bcForm.value = cloneDeep(basicVali)
		} else {
			message.warning('请完善基本信息')
			return false
		}
	} else if (approvalType.value == '8') {
		const annexVali = await annex.value.retForm()
		// 调用孙子组件portalForm的校验方法
		if (appAccess.value.includes('1') && tableName.value.includes('PC')) {
			const portal = await gure.value.portalValidate()
			if (portal) {
				bcForm.value.appInfoPcPropertiesAddParam = cloneDeep({ ...portal, ...annexVali })
			} else {
				message.warning('请完善门户端HTML配置信息')
				return false
			}
		}
		// 调用孙子组件mobileForm的校验方法
		if (appAccess.value.includes('2') && (tableName.value.includes('APP') || tableName.value.includes('MOBILE'))) {
			const mobile = await gure.value.mobileValidate()
			if (mobile) {
				bcForm.value.appInfoAppPropertiesAddParam = cloneDeep({ ...mobile, ...annexVali })
				if (!isBack.value) {
					setParam()
				}
			} else {
				message.warning('请完善移动端HTML配置信息')
				return false
			}
		}

		validsp()
	} else {
		//如果不是下架 不是接入
		// 调用子组件basic的校验方法并返回子组件的formData
		if (approvalType.value !== '8') {
			const basicVali = await basic.value?.handleValidate()
			if (basicVali) {
				bcForm.value = cloneDeep(basicVali)
			} else {
				message.warning('请完善基本信息')
				return false
			}
		}

		// 调用孙子组件portalForm的校验方法
		if (appAccess.value.includes('1') && tableName.value.includes('PC')) {
			const portal = await gure.value.portalValidate()
			if (portal) {
				bcForm.value.appInfoPcPropertiesAddParam = cloneDeep(portal)
			} else {
				message.warning('请完善门户端HTML配置信息')
				return false
			}
		}
		// 调用孙子组件mobileForm的校验方法
		if (appAccess.value.includes('2') && (tableName.value.includes('APP') || tableName.value.includes('MOBILE'))) {
			const mobile = await gure.value.mobileValidate()
			if (mobile) {
				bcForm.value.appInfoAppPropertiesAddParam = cloneDeep(mobile)
				if (!isBack.value) {
					setParam()
				}
			} else {
				message.warning('请完善移动端HTML配置信息')
				return false
			}
		}
		// 调用孙子组件androidValidate的校验方法
		if (appAccess.value.includes('3') && tableName.value.includes('ANDROID')) {
			const mobile = await gure.value.androidValidate()
			if (mobile) {
				bcForm.value.appInfoAndroidPropertiesAddParam = cloneDeep(mobile)
			} else {
				message.warning('请完善Android配置信息')
				return false
			}
		}
		// 调用孙子组件iosValidate的校验方法
		if (appAccess.value.includes('4') && tableName.value.includes('IOS')) {
			const mobile = await gure.value.iosValidate()
			if (mobile) {
				bcForm.value.appInfoIosPropertiesAddParam = cloneDeep(mobile)
			} else {
				message.warning('请完善Ios配置信息')
				return false
			}
		}
		// 调用孙子组件umapValidate的校验方法
		if (appAccess.value.includes('5') && tableName.value.includes('UMAP')) {
			const mobile = await gure.value.umapValidate()
			if (mobile) {
				bcForm.value.appInfoUmapPropertiesAddParam = cloneDeep(mobile)
			} else {
				message.warning('请完善Umap配置信息')
				return false
			}
		}
		// 调用子组件annex的校验方法并返回子组件的formData
		if (annex.value) {
			const annexVali = await annex.value.handleValidate()
			if (annexVali) {
				if (tableName.value.includes('APP')) {
					bcForm.value.appInfoAppPropertiesAddParam = { ...bcForm.value.appInfoAppPropertiesAddParam, ...annexVali }
				} else {
					bcForm.value.appInfoPcPropertiesAddParam = { ...bcForm.value.appInfoPcPropertiesAddParam, ...annexVali }
				}

			} else {
				message.warning('请完善附件信息')
				return false
			}
		}

	}
	if (approvalType.value == '0') {
		backDelist()
	} else {
		validsp()
	}
}
const lastClickTime = ref(0)
const clickInterval = ref(1000) // 定义点击间隔为1秒
// 提交审批按钮点击
const submit = async () => {
	// btnLoading.value = true
	const currentTime = Date.now();
	if (currentTime - lastClickTime.value < clickInterval.value) {
		// 时间间隔过小，直接返回
		return;
	}
	lastClickTime.value = currentTime;
	// '灰度发布', '应用上线' 两个环节需要补充附件， 其他环节直接走审批
	if (supplement.value) {
		// 调用子组件annex的校验方法并返回子组件的formData
		annex.value
			.handleValidate()
			.then((res) => {
				// console.log(res)
				if (!res) {
					message.warning('请完善附件信息')
					btnLoading.value = false
					return false
				} else {
					// 验证通过附件-表单赋值， 再去验证审批信息表单是否合格
					bcForm.value = cloneDeep(res)
					validsp()
				}
			})
			.catch(() => {
				console.log('失败')
				btnLoading.value = false
			})
	} else if (isProd.value) {
		let obj = {}
		const annexVali = await annex.value.handleValidate()
		if (annexVali) {
			obj = { ...annexVali }
		} else {
			message.warning('请完善附件信息')
			return false
		}
		// 调用孙子组件portalForm的校验方法
		if (appAccess.value.includes('1') && tableName.value.includes('PC')) {
			const portal = await gure.value.portalValidate()
			if (portal) {
				bcForm.value.appInfoPcPropertiesAddParam = cloneDeep({ ...portal, ...obj })
			} else {
				message.warning('请完善门户端HTML配置信息')
				return false
			}
		}
		// 调用孙子组件mobileForm的校验方法
		if (appAccess.value.includes('2') && (tableName.value.includes('APP') || tableName.value.includes('MOBILE'))) {
			const mobile = await gure.value.mobileValidate()
			if (mobile) {
				bcForm.value.appInfoAppPropertiesAddParam = cloneDeep({ ...mobile, ...obj })
				// if (!isBack.value) {
				// 	setParam()
				// }
			} else {
				message.warning('请完善移动端HTML配置信息')
				return false
			}
		}
		validsp()

	} else if (showParam.value && (tableName.value.includes('APP') || tableName.value.includes('MOBILE')) && (datas.value.isAppTodo === '1' || datas.value.isAppReadtodo === '1')) {
		// 运营组审核
		if (!tool.session.get('param')) {
			message.warning('请完善移动端参数信息')
			btnLoading.value = false
		} else {
			validsp()
		}
	} else if (upConfirm.value) {
		// 应用上线
		if (formDelay.isTask != '1' && formDelay.isTask != '0') {
			message.warning('请选择是否延时发布')
			btnLoading.value = false
			return false
		}
		if (formDelay.isTask == '1' && !formDelay.time) {
			message.warning('请选择发布时间')
			btnLoading.value = false
			return false
		}
		const dqtime = new Date().getTime() // 当前时间戳
		const timecc = new Date(formDelay.time).getTime() // 时间戳
		if (formDelay.isTask == '1' && timecc < dqtime) {
			message.warning('所选发布时间不能小于当前时间')
			btnLoading.value = false
			return false
		}
		const obj = {
			...params,
			...formDelay
		}
		appInfoApi.isTaskRelease(obj).then((res) => {
			validsp()
		})
	} else {
		validsp()
	}
}

// 退回开始
const radioStyle = reactive({
	display: 'flex',
	height: '30px',
	lineHeight: '30px'
})

const backList = reactive([
	{ name: '退回到发起人', key: '1' },
	{ name: '退回上一环节', key: '2' },
	{ name: '退回指定环节', key: '3' }
])
const history = ref()
const zsHistory = ref()
const choose = ref(false)
const choData = ref('')
const basic = ref(null)
const gure = ref(null)
const radioChange = (e) => {
	const { value } = e.target
	history.value = history.value.filter((v) => v.stepId === value)
}

const chooseOk = () => {
	const param = {}
	const id = route.query.id
	const hist = history.value[0]
	choose.value = false
	param.id = id
	param.auditAgree = opinion.value === '2' ? `【不同意】,${formData.auditAgree}` : formData.auditAgree
	param.historyMessageWorkitemId = hist.historyMessageWorkitemId
	param.nextStepName = hist.stepName
	param.selectExecuterCode = hist.selectExecuterCode
	param.selectExecuterName = hist.selectExecuterName
	param.selectSteps = hist.stepId
	param.appType = tableName.value.includes('PC') ? '1' : '2'
	btnLoading.value = true
	approvalApi.backTask(param).then(() => {
		btnLoading.value = false
		backs()
	})
}
const pick = ref(null)
// 获取选人组件的角色
let roleList = ref([])

const getRoleList = async () => {
	let searchKey = ''
	if (tableName.value === 'PC') {
		searchKey = '1'
	}
	if (tableName.value === 'APP') {
		searchKey = '2'
	}
	if (tableName.value.includes('PC') && tableName.value.includes('APP')) {
		searchKey = '1,2'
	}
	const obj = {
		roleId: route.query.id,
		ascriptionId: datas.value.platformBelongId,
		appRange: datas.value.appRange,
		searchKey: searchKey,
	}

	// roleList.value = await bizRoleApi.getFlowRoleList(obj)
	const arr = await bizRoleApi.getFlowRoleList(obj)
	// 如果没有人提示
	// 如果有人判断用不用弹窗
	if (arr.length == 0) {
		Modal.confirm({
			title: '提示',
			icon: createVNode(ExclamationCircleOutlined),
			content: '当前环节无可选人员，请联系双门户管理员hqs-swxreq@chinaunicom.cn',
			okText: '确认',
			cancelText: '取消',
		});
	} else {
		const obj = arr[0]
		if (obj.category && obj.category === 'zj') {
			const bizObj = obj?.bizUserList[0]
			formData.approvalUsers = [{
				name: bizObj?.name,
				account: bizObj?.account,
				deptCode: bizObj?.orgId
			}]
			lastOk()
		} else {
			roleList.value = arr
			if (pick.value) {
				pick.value.setVisible(true)
			}
		}
	}


}
// 数组排序
const compareValues = (key, order = 'asc') => {
	return function innerSort(a, b) {
		if (!a.hasOwnProperty(key) || !b.hasOwnProperty(key)) {
			// 该属性在任何一个对象上都不存在
			return 0;
		}

		const varA = (typeof a[key] === 'string')
			? a[key].toUpperCase() : a[key];
		const varB = (typeof b[key] === 'string')
			? b[key].toUpperCase() : b[key];

		let comparison = 0;
		if (varA > varB) {
			comparison = 1;
		} else if (varA < varB) {
			comparison = -1;
		}
		return (
			(order === 'desc') ? (comparison * -1) : comparison
		);
	};
}

// 流程退回 backMark 1退回发起人，2退回上一步，3退回某环节
const backStep = async (key) => {
	if (opinion.value === '1') return
	if (!formData.auditAgree) {
		message.warning('请填写审批意见')
		return false
	}
	const id = route.query.id
	const params = {
		backMark: key,
		id: id
	}
	history.value = await approvalApi.getHistoryStep(params)
	zsHistory.value = cloneDeep(history.value).sort(compareValues('stepId'))
	//
	if (key !== '3') {
		chooseOk()
	} else {
		choose.value = true
	}
}
// 退回结束

// 如果是退回发起人工单可编辑逻辑
const appAccess = ref([])
let isPcTodo = ref('1')
let isPcReadtodo = ref('1')
const isBack = computed(() => {
	return route.query.stepId === 'a001' ? true : false
})
// 是否接入pc待办
provide('isPcTodo', isPcTodo)
// 是否接入pc待阅
provide('isPcReadtodo', isPcReadtodo)

// 根据type给不同的变量赋值
const hqVariable = (e, type) => {
	if (type === 'appAccess') appAccess.value = e
	if (type === 'isPcTodo') isPcTodo.value = e
	if (type === 'isPcReadtodo') isPcReadtodo.value = e
	// if (type === 'isAppTodo') isAppTodo.value = e`
	// if (type === 'isAppReadtodo') isAppReadtodo.value = e
}

//详情接口 调用
const detailDate = async () => {
	datas.value = await appInfoApi.appInfowaitDetails({ messageTrackId: route.query.id })
	if (tableName.value && tableName.value.includes('APP')) {
		store.dispatch('setAppVersion', datas.value.appPropertiesList[0].appVersion)
	}

	// 如果是退回发起人工单可编辑逻辑
	appAccess.value = datas.value.appAccess ? datas.value.appAccess.split(',') : []
	isPcTodo.value = datas.value.isPcTodo ? datas.value.isPcTodo : '1'
	isPcReadtodo.value = datas.value.isPcReadtodo ? datas.value.isPcReadtodo : '1'
	dataSource.value = datas.value.changeDetails ? JSON.parse(datas.value.changeDetails) : []
	dataSource.value.forEach((v, i) => {
		if (v.changeTerm == 'editAppType') {
			dataSource.value.splice(i, 1)
		}
		if (v.changeTerm == 'appContact') {
			isPM()
		}
	});
}
provide('detailDate', datas)
provide('editDate', datas)

const getDatas = () => {
	detailDate()
	//流程图
	getFlowchart()
	// 审批记录
	getAudit()
	// 获取下一步环节 - 待办请求
	if (doneStatus.value == '0') {
		stepPath()
	}
}

// 避免路径不变 参数变化页面不刷新
watch(() => route.query, (newQuery, oldQuery) => {
	const { doneStatus, originatorName, approvalType, stepId } = route.query
	if (approvalType) {
		datas.value = ''
		tool.session.set('doneStatus', doneStatus)
		tool.session.set('promoter', originatorName)
		tool.session.set('approvalType', approvalType)
		tool.session.set('stepId', stepId)
		getDatas()
	}



}, { immediate: true });

// 审批信息
const formData = reactive({
	auditAgree: '同意',
	yesOrNo: ''
})
const opinion = ref('1')
// 审批input赋值
const opinionChange = (e) => {
	formData.auditAgree = opinion.value === '1' ? '同意' : '不同意'
}

const activeKey = ref('1')
const lastOk = () => {
	const arr = ['2', '3', '8'];
	if (supplement.value) {
		// 灰度发布和上线材料环节
		visible.value = true
	} else if (isBack.value) {
		// 被退回到申请人的
		if (approvalType.value == '0') {
			// 如果是下架流程
			submitFlow()
		} else {
			handleOk()
		}
	} else if (showParam.value && (tableName.value.includes('APP') || tableName.value.includes('MOBILE')) && arr.includes(approvalType.value)) {
		// 运营组审核
		yunOk()
	} else if (isProd.value) {
		// 申请人提交生产材料
		handleOk()
	}
	else {
		//  正常流转的单子
		submitFlow()
	}
}

const selectPerson = () => {
	pick.value.setVisible(false)
}

const setUser = (user) => {
	if (user && user.length > 0) {
		formData.approvalUsers = user
		approvalUsers.value = user.map((v) => v.name).join()
		selectPerson()
		lastOk()
	}
}
const exportForm = () => {
	console.log('daochu')
	btnLoading.value = true
	// appInfoApi.testExport(datas.value.id).then(() => {
	// 	btnLoading.value = false
	// })
	const fileUrl = import.meta.env.VITE_API_BASEURL
	const path = `${fileUrl}/biz/appinfo/testExport/${datas.value.id}`
	const name = '测试数据.json'
	const xhr = new XMLHttpRequest()
	xhr.open('get', path)
	xhr.setRequestHeader('Token', tool.data.get('TOKEN'))
	xhr.responseType = 'blob'
	xhr.send()
	xhr.onload = function () {
		if (this.status === 200 || this.status === 304) {
			btnLoading.value = false
			const fileReader = new FileReader()
			fileReader.readAsDataURL(this.response)
			fileReader.onload = function () {
				const a = document.createElement('a')
				a.style.display = 'none'
				a.href = this.result
				a.download = name
				document.body.appendChild(a)
				a.click()
				document.body.removeChild(a)
			}
		}
	}
}
const zidian = (key) => {
	let label = ''
	biangeng.find(v => {
		if (v.prop == key) {
			label = v.label
		}
	})
	return label
}
const bianli = (arr, key) => {
	let label = ''
	arr.find(v => {
		if (v.key == key) {
			label = v.label
		}
	})
	return label
}

const downloadFile = (item) => {
	if (item) {
		const fileUrl = import.meta.env.VITE_FILE_URL
		const path = item.url.includes('http://') ? item.url : `${fileUrl}/${item.url}`
		const name = item.name
		const xhr = new XMLHttpRequest()
		xhr.open('get', path)
		xhr.setRequestHeader('Token', tool.data.get('TOKEN'))
		xhr.responseType = 'blob'
		xhr.send()
		xhr.onload = function () {
			if (this.status === 200 || this.status === 304) {
				const fileReader = new FileReader()
				fileReader.readAsDataURL(this.response)
				fileReader.onload = function () {
					const a = document.createElement('a')
					a.style.display = 'none'
					a.href = this.result
					a.download = name
					document.body.appendChild(a)
					a.click()
					document.body.removeChild(a)
				}
			}
		}
	}

}
const personList = ref([])
const isPM = () => {
	appInfoApi.isPM().then((data) => {
		personList.value = data
	})
}
const xmjl = (text) => {
	let str = ''
	personList.value.forEach(v => {
		if (v.id == text) {
			str = v.name + v.phone ? v.phone : ''
		}
	})
	return str
}
const config = sysConfig.DEVICE_CONFIG
const sdjs = (data) => {
	let str = ''
	if (data) {
		if (data.includes(',')) {
			let arr = config.filter((v) => data.includes(v.key))
			str = arr.map((v) => v.txt).join()
		} else {
			str = config.find((v) => v.key === data).txt
		}
	}
	return str
}
</script>

<style lang="less" scoped>
.btn {
	text-align: right;

	.bt1 {
		margin-right: 10px;
	}
}

.labelCla {
	padding: 0 0 8px;

	.label-fon {
		margin-right: 10px;
	}
}

.btnposi {
	position: absolute;
	bottom: 0;
	right: 0;
	width: 100%;
}

.file-item {
	color: rgb(89, 89, 89);
	cursor: pointer;
	margin-top: 4px;
}

.file-item:hover {
	color: var(--primary-color);
}
:deep(.ant-table-thead > tr > th) {
    font-weight: 600;
    width: 180px; 
    // max-width: 200px;
}
</style>
<style>
.dessy {
	margin-top: 10px;
}
</style>
